<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: blue;
        }

        ::-moz-placeholder {
        /* Firefox 19+ */
        color: blue;
        }

        :-ms-input-placeholder {
        /* IE 10+ */
        color: blue;
        }

        :-moz-placeholder {
        /* Firefox 18- */
        color: blue;

        }
        input{
            /* 光标颜色 */
            caret-color: red;
        }
        body{
            height:1000px;
            /* background-image: url(1.jpg);
            background-repeat: no-repeat; */
            /* 背景图片是否跟随滚动条，滚动
               scroll 会滚动
               fixed 不会滚动（背景图片固定）
             */
            /* background-attachment: scroll; */

            /* background: color image attachment repeat position;
               可以任意组合 任意挑选属性个数(1-5)
             */
            background: red url(1.jpg) fixed no-repeat center;
        }
        div{
            height:500px;
            width:500px;
            border:10px double red;
            padding:50px;
            /* 背景颜色的延伸范围 
               border-box 默认  边框开始有颜色
               padding-box  padding 开始有颜色
               content-box  内容开始有颜色
            */
            /* background-clip:padding-box; */

            /* 展示背景图片的开始位置(左上角) 
               border-box   边框开始有颜色
               padding-box  padding 开始有颜色  默认
               content-box  内容开始有颜色
            */
            background-origin:border-box;


            /* 背景颜色 */
            background-color: aqua;
            /* 背景图片 */
            background-image: url(1.jpg);
            /* 背景图片平铺 
              repeat xy都平铺
              no-repeat 不平铺
              repeat-x  x轴平铺
              repeat-y  y轴平铺
            */
            background-repeat:no-repeat;
            /* 背景图片大小 
               auto 自动
               px、% 宽度 高度
               cover 覆盖 填满(有部分图片会被裁掉)
               contain 填满(有部分图片空间会漏掉，填满一个轴)
            */
            background-size:100% 100%;

            /* 背景图片的位置
               center 居中
               left bottom 左下角
               10px(x轴) 20px(y轴)
               10% 50%
             */
            background-position:10% 50%;
        }
    </style>
</head>
<body>
    <!-- https://ppui-static-pc.cdn.bcebos.com/static/passpc-account/img/reg_bg_min.jpg -->
    <input type="text" placeholder="请输入用户名">

    <!-- <div></div> -->
</body>
</html>